<template>
	<uv-notice-bar :text="text" mode="closable"></uv-notice-bar>
	<view class="content">
		<view class="blod-text j-center">二手交易市场</view>
		<!-- 标签选择 -->
		<scroll-view scroll-x="true" class="nav-scroll mt-30">
			<view v-for="(item, index) in navItems" :key="index" class="nav-item mr-30" :class="{ active: item.active }"
				@click="handleItemClick(index)">
				{{ item.name }}
			</view>
		</scroll-view>
		<view class="mt-50">
			<uv-search placeholder="请输入搜索内容" v-model="keyword" :clearabled="true"></uv-search>
		</view>
		<!-- 动态区，用来交易的 -->
		<view class="activity-content mt-50" v-for="(item, index) in choose_content" :key="index">
			<!-- 基础信息，包含头像以及姓名学校等 -->
			<view class="flex-space">
				<view class="flex">
					<view class="user-icon"></view>
					<view class="infon-box ml-10">
						<view class="user-name">{{item.name}}</view>
						<view class="tips-text mt-10">{{item.school}}</view>
					</view>
				</view>
				<view class="time-text a-center">{{item.time}}</view>
			</view>
			<!-- 活动标题 -->
			<view class="blod-text mt-10" @click="gotoDetails(item)">{{item.title}}</view>
			<!-- 活动内容 -->
			<view class="content-text mt-10 text-overflow-3" @click="gotoDetails(item)">{{item.content}}</view>
			<!-- 内容标签以及状态 -->
			<view class="flex-space mt-30">
				<view class="flex">
					<uv-tags :text="item.category" size="mini"></uv-tags>
					<view class="ml-30">
						<uv-tags :text="item.sale" size="mini" type="error" v-if="item.is_sale"></uv-tags>
						<uv-tags :text="item.sale" size="mini" type="success" v-if="!item.is_sale"></uv-tags>
					</view>
				</view>
				<view class="flex">
					<uv-icon size="23" name="more-circle" color="primary"></uv-icon>
					<view class="blue-text ml-10">评论 {{item.comment_num}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '二手交易目前只有线下交易，请尽量选择本校的物品当面交易，警惕诈骗！',
				navItems: [{
						name: '全部',
						active: true
					},
					{
						name: '本校内闲置'
					},
					{
						name: '其他校区/校园'
					},
				],
				content_list: [{
						name: '吴彦祖',
						school: '五邑大学',
						title: '今天吃什么?',
						time: '2025-2-22 18:35',
						category: '本校内闲置',
						content: `  每天就知道问吃什么，能不能有点出息，点进来给你推荐一些...
									每天就知道问吃什么，能不能有点出息，点进来给你推荐一些...
									每天就知道问吃什么，能不能有点出息，点进来给你推荐一些..`,
						comment_num: 0,
						is_sale: false, //是否已销售
						sale:'未售',
					},
					{
						name: '彭于晏',
						school: '五邑大学',
						title: '二手书籍?',
						time: '2025-2-22 18:35',
						category: '本校内闲置',
						content: `  走过路过不要错过，看看这里有卖什么闲置的好东西`,
						comment_num: 0,
						is_sale: true,
						sale:'已售',
					},
					{
						name: '人机哥',
						school: '五邑大学',
						title: '今天吃什么?',
						time: '2025-2-22 18:35',
						category: '其他校区/校园',
						content: `  过来跟我一起交友，每天都可以上线开黑`,
						comment_num: 0,
						is_sale: false,
						sale:'未售',
					},
				],
				choose_content: [{
						name: '吴彦祖',
						school: '五邑大学',
						title: '今天吃什么?',
						time: '2025-2-22 18:35',
						category: '本校内闲置',
						content: `  每天就知道问吃什么，能不能有点出息，点进来给你推荐一些...
									每天就知道问吃什么，能不能有点出息，点进来给你推荐一些...
									每天就知道问吃什么，能不能有点出息，点进来给你推荐一些..`,
						likes_num: 6,
						comment_num: 0,
						is_sale: false,
						sale:'未售',
					},
					{
						name: '彭于晏',
						school: '五邑大学',
						title: '二手书籍?',
						time: '2025-2-22 18:35',
						category: '本校内闲置',
						content: `  走过路过不要错过，看看这里有卖什么闲置的好东西`,
						likes_num: 8,
						comment_num: 0,
						is_sale: true,
						sale:'已售',
					},
					{
						name: '人机哥',
						school: '五邑大学',
						title: '今天吃什么?',
						time: '2025-2-22 18:35',
						category: '其他校区/校园',
						content: `  过来跟我一起交友，每天都可以上线开黑`,
						likes_num: 4,
						comment_num: 0,
						is_sale: false,
						sale:'未售',
					},
				],
				keyword:'', //搜索内容
			}
		},
		methods: {
			handleItemClick(index) {
				this.navItems.forEach((item, i) => {
					item.active = i === index;
				});
				// 根据选中的标签过滤 content_list
				const selectedCategory = this.navItems[index].name;
				if (selectedCategory === '全部') {
					this.choose_content = this.content_list.slice();
				} else {
					this.choose_content = this.content_list.filter(item => item.category === selectedCategory);
				}
			},
		}
	}
</script>

<style scoped>
	.content {
		padding: 30rpx;
	}

	.nav-scroll {
		white-space: nowrap;
		overflow: hidden;
	}

	.nav-item {
		display: inline-block;
		padding: 10rpx;
		font-size: 26rpx;
		background-color: #ebebeb;
		cursor: pointer;
	}

	.nav-item.active {
		background-color: #ff9800;
		color: #fff;
	}
</style>